<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08视口</title>
    <style>
        .box1{
            width: 100vw;
            height: 100px;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <!-- 
        不同设备的完美视口是不同的
        iPhone6：375px
        iPhone6plus：414px
        由于不同设备视口和像素比不同，所以同样的在不同像素比屏幕下的显示效果也不一样
        所以在移动端开发时，就不能再使用px进行布局了
        用 vw ：表示视口的宽度（viewport width）
        100vw=一个视口的宽度
        1vw=1%的视口宽度

        移动端网页一般都是750px x 1125px（设计图的像素）
        750px->375的两倍
        1125->375的三倍

        若创建一个48px x 35px 大小的元素
        122vw = 750px
        0.1333333vw=1px
        所以6.4vw x 4.667vw
     -->
     <div class="box1"></div>
</body>
</html>